<template>
  <div>
    <div id="week-charts"></div>
  </div>
</template>
<script>
import { getWeek } from "@/api/orderApi";
export default {
  data() {
    return {
      buyMoney: [],
      sellMoney: [],
      profits : []
    };
  },
  mounted() {
    this.weekEcharts();
  },
  methods: {
    weekEcharts() {
      let arr = [];
      let date = new Date();
      //date.setDate(date.getDate() - 1);
      for (let i = 0; i < 7; i++) {
        let str = "";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month < 10) {
          month = "0" + month;
        }
        if (day < 10) {
          day = "0" + day;
        }
        str = year + "-" + month + "-" + day;
        arr.push(str);
        date.setDate(date.getDate() - 1);
      }
      //   console.log(arr)
      let myChart = this.$echarts.init(document.getElementById("week-charts"));
      getWeek().then((res) => {
        if (res.code == 0) {
          // console.log(res.data)
          res.data.forEach((item) => {
            this.buyMoney.push(item.buyMoney * -1);
            this.sellMoney.push(item.sellMoney);
            this.profits.push(item.sellMoney - item.buyMoney)
          });
          let option = {
            title: {
              text: "一周销售统计",
              subtext: "在订单处设置出售数量即为出售某件商品",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            legend: {
              data: ["利润", "支出", "收入"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "value",
                axisLabel: {
                  formatter: "{value} 元",
                },
              },
            ],
            yAxis: [
              {
                type: "category",
                axisTick: {
                  show: false,
                },
                data: arr.reverse(),
              },
            ],
            series: [
              {
                name: "利润",
                type: "bar",
                label: {
                  show: true,
                  position: "inside",
                },
                data: this.profits.reverse(),
              },
              {
                name: "收入",
                type: "bar",
                stack: "总量",
                label: {
                  show: true,
                },
                data: this.sellMoney.reverse(),
              },
              {
                name: "支出",
                type: "bar",
                stack: "总量",
                label: {
                  show: true,
                  position: "left",
                },
                data: this.buyMoney.reverse(),
              },
            ],
          };
          myChart.setOption(option);
          // console.log(this.buyMoney)
          // console.log(this.sellMoney)
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#week-charts {
  width: 100%;
  height: 600px;
}
</style>